JavaScript - Event Delegation

👀 [[JavaScript - Event Bubbling VS Event Capturing]]

많은 Element에서 비슷하게 이벤트를 처리할 때 하나의 handler를 이용하여 처리하는 방법

event.target로 이벤트 발생 진원지를 알 수 있다.

예를 들어 <table>이 있고 테이블 셀을 클릭하면 색칠해주는 이벤트를 달고 싶다고 할 때, 각각 달자니 굉장히 번거롭다. 아래처럼 처리할 수 있을 것이다.

let selectedTd

// 테이블 전체에 listener를 부착한다.
table.onclick = function (event) {
  let target = event.target // 클릭이 발생한곳이

  if (target.tagName != "TD") return // 테이블 셀이 아니면 중지

  highlight(target) // 맞으면 전달
}

function highlight(td) {
  if (selectedTd) {
    // 이미 색칠된 것이 있으면 제거
    selectedTd.classList.remove("highlight")
  }
  selectedTd = td
  selectedTd.classList.add("highlight") // target이 셀이기때문에 거기에 부착
}

하지만 항상 잘 작동하는 것은 아니다. 만약 <td>내부에 다른 element가 있으면 event.target이 다르게 나올 것이다.

이럴 떄는 event.target.closest('td') 이런식으로 selector와 일치하는 가장 가까운 부모 element를 가져올 수 있다. 그리고 <table>이 갖고있는지 확인하면 된다.

markup의 data-set이용하기

<div id="menu">
  <button data-action="save">Save</button>
  <button data-action="load">Load</button>
  <button data-action="search">Search</button>
</div>

<script>
  class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

    save() {
      alert('saving');
    }

    load() {
      alert('loading');
    }

    search() {
      alert('searching');
    }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }

  new Menu(menu);
</script>

• event-delegation